<!--
 * @description 排行榜列表组件
 * @date 2022/11/12
 -->
<template>
  <section class="rank-list-comp">
    <section
      class="rankList"
      :style="{
      
        'padding-top': px2rem(option.top)
      }"
    >
      <van-pull-refresh
        id="specialIndex"
        v-model="isLoading"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="finishedText"
          :immediate-check="false"
          :offset="20"
          @load="onLoad"
        >
          <section
            v-for="(item, index) in list"
            :key="index"
            class="list-item"
            :style="{
              padding: '0' + px2rem(option.paddingLeftRight),
              background:
                index === 0
                  ? option.firstBackgroundColor
                  : index === 1
                    ? option.secondBackgroundColor
                    : index === 2
                      ? option.threeBackgroundColor
                      : '',
            }"
          >
            <section class="item-left">
              <section class="rank-num">
                <template v-if="labelObj!==undefined">
                  <label-comp v-if="item.rank<4" :label-list="item.labelList" />
                </template>
                <template v-else>
                  <img
                    v-if="item.rank == 1"
                    :src="
                      option.firstIcon && option.firstIcon != ''
                        ? option.firstIcon
                        : one
                    "
                  >
                  <img
                    v-if="item.rank == 2"
                    :src="
                      option.secondIcon && option.secondIcon != ''
                        ? option.secondIcon
                        : two
                    "
                  >
                  <img
                    v-if="item.rank == 3"
                    :src="
                      option.threeIcon && option.threeIcon != ''
                        ? option.threeIcon
                        : three
                    "
                  >
                </template>
                <span v-if="item.rank > 3" class="din-front">{{
                  item.rank || ''
                }}</span>
              </section>
              <section class="rank-userinfo">
                <van-image :src="setImgPath(item.userView, item.userViewUrl)">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                  <template v-slot:error>
                    <img src="./images/error-icon.png" alt>
                  </template>
                </van-image>
                <section class="user-info">
                  <p class="user-name">{{ item.userRealName || '' }}</p>
                </section>
              </section>
            </section>
            <section class="integral din-front">
              {{ item.scoreTotal | toDecimal }}
            </section>
          </section>
        </van-list>
      </van-pull-refresh>
    </section>
    <section v-if="myrank" class="main-my">
      <section v-if="myrank" class="my-rank-info">
        <section class="my-rank-info-left">
          <section
            class="rank-num"
            :class="{ 'my-num': parseInt(myrank.rank) > 9999 }"
          >
            <template v-if="labelObj!==undefined">
              <label-comp v-if="myArr.length>0 && myArr[0].rank<4" :label-list="myArr[0].labelList" />
            </template>
            <template v-else>
              <img
                v-if="myrank.rank == 1"
                :src="
                  option.firstIcon && option.firstIcon != ''
                    ? option.firstIcon
                    : one
                "
              >
              <img
                v-if="myrank.rank == 2"
                :src="
                  option.secondIcon && option.secondIcon != ''
                    ? option.secondIcon
                    : two
                "
              >
              <img
                v-if="myrank.rank == 3"
                :src="
                  option.threeIcon && option.threeIcon != ''
                    ? option.threeIcon
                    : three
                "
              >
            </template>
            <span v-if="myrank.rank > 3" class="din-front">{{
              myrank.rank > 100 ? '100+' : myrank.rank
            }}</span>
            <span v-else-if="myrank.rank === 0" class="din-front">--</span>
          </section>
          <section class="rank-userinfo">
            <van-image :src="setImgPath(myrank.userView, myrank.userViewUrl)">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error>
                <img src="./images/error-icon.png" alt>
              </template>
            </van-image>
            <section class="user-info">
              <p class="user-name">{{ myrank.userRealName || '' }}</p>
            </section>
          </section>
        </section>
        <section class="integral din-front">
          {{ myrank.scoreTotal | toDecimal }}
        </section>
      </section>
      <section v-else class="my-rank-info-empty">暂无排行</section>
    </section>
  </section>
</template>

<script>
import mixins from './../mixins'
import one from './images/rank-one.png'
import two from './images/rank-two.png'
import three from './images/rank-three.png'
import LabelComp from '@/components/CustomPage/apps/widget/labelComp'
export default {
  name: 'RankListComp',
  components: { LabelComp },
  filters: {
    toDecimal(num) {
      if (+num > 10000) {
        var s = (num / 10000).toString()
        let numList = []
        let str = ''
        if (s.indexOf('.') !== -1) {
          numList = s.split('.')
        } else {
          numList.push(s)
        }
        if (numList.length > 0) {
          if (numList.length === 1) {
            str = numList[0] + 'w'
          } else {
            for (let i = 0; i < numList.length; i++) {
              if (i === 0) {
                str = numList[0] + '.'
              }
              if (i === 1) {
                if (numList[i].length >= 2) {
                  const numLength = numList[i].length

                  str += numList[i].substring(0, 2)
                  if (
                    numLength > 2 &&
										parseFloat(numList[i].substring(2, numLength)) >= 1
                  ) {
                    str += 'w+'
                  } else {
                    str += 'w'
                  }
                } else {
                  str += numList[i]
                  if (parseFloat(numList[i]) >= 1) {
                    str += 'w+'
                  } else {
                    str += 'w'
                  }
                }
              }
            }
          }
        }
        return str
      } else {
        return num
      }
    }
  },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default() {
        return {}
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      one: one,
      two: two,
      three: three,
      list: [], // 列表数据
      myrank: {},
      /** 接口参数 start */
      page: 1,
      defaultMyData: {
        userView: '22111220fb885e3b674169b7e345b00e5c9c55.jpg',
        userViewUrl:
					'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/12/22111220fb885e3b674169b7e345b00e5c9c55.jpg',
        userRealName: '李冲',
        scoreTotal: 13088,
        rank: 1
      },
      defaultList: [
        {
          userView: '22111220fb885e3b674169b7e345b00e5c9c55.jpg',
          userViewUrl:
						'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/12/22111220fb885e3b674169b7e345b00e5c9c55.jpg',
          userRealName: '李冲',
          scoreTotal: 13088,
          rank: 1
        },
        {
          userView: '22111220fb885e3b674169b7e345b00e5c9c55.jpg',
          userViewUrl:
						'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/12/22111220fb885e3b674169b7e345b00e5c9c55.jpg',
          userRealName: '王雪芬',
          scoreTotal: 9999,
          rank: 2
        },
        {
          userView: '22111220fb885e3b674169b7e345b00e5c9c55.jpg',
          userViewUrl:
						'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/4146cde6-8f9b-4580-a154-f410e2c3fd2a/22/11/12/22111220fb885e3b674169b7e345b00e5c9c55.jpg',
          userRealName: '李学强',
          scoreTotal: 120,
          rank: 3
        }
      ],
      labelObj: undefined
    }
  },
  async created() {
    if (this.isInitData) {
      this.labelObj = await this.getLabelList()
      await this.initData()
    } else {
      this.finished = true
      this.list = this.defaultList
      this.myrank = this.defaultMyData
    }
  },
  methods: {
    setData(result) {
      const res = result.dataList
      const { rows, total } = res.data || {}
      this.list.push(...rows)
      this.myrank = res.data.my
      this.loading = false
      this.isLoading = false
      this.isNoData = total < 1
      if (this.isNoData) {
        this.finishedText = ''
      } else {
        this.finishedText = '已经到底了'
      }
      if (this.list.length >= total) {
        this.finished = true
      } else {
        this.finished = false
      }
      if (this.labelObj !== undefined) {
        this.setLabel(this.list, 'list')
        this.myArr = []
        if(this.myrank!==undefined){
          this.myArr.push(this.myrank)
          this.setLabel(this.myArr, 'myArr')
        }
      }
    },
    /**
		 * 刷新
		 */
    onRefresh() {
      return new Promise((resolve, reject) => {
        this.finished = false
        this.page = 1
        this.list = []
        this.seflLoadData()
        reject()
      })
    },
    /**
		 * 上拉加载
		 */
    onLoad() {
      if (!this.isLoading) {
        this.page += 1
        console.log(this.page, 'this.page')
        this.seflLoadData()
      } else {
        this.loading = false
      }
    },
    /**
		 * 加载数据
		 */
    async seflLoadData() {
      await this.getDataByCode('dataList')
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.rank-list-comp {
	position: relative;
	.rankList {
		.list-item {
			height: rem(110);
			padding: 0 rem(23) 0 rem(14);
			display: flex;
			background-color: #fff;
			align-items: center;
			justify-content: space-between;
			margin: 0 rem(30) rem(20);
			border-radius: rem(12);
			&:last-child {
				margin: 0 rem(30) 0;
			}
			.item-left {
				flex: 1;
				display: flex;
				align-items: center;
				.rank-num {
					width: rem(80);
					height: rem(50);
					line-height: rem(60);
					flex: 0 0 auto;
					img,
					span {
						display: block;
						width: rem(42);
						height: 100%;
						font-size: rem(30);
						font-weight: 600;
						text-align: center;
						color: rgba(51, 51, 51, 1);
					}
				}
				.rank-userinfo {
					height: 100%;
					display: flex;
					align-items: center;
					.van-image {
						width: rem(74);
						height: rem(74);
						border-radius: 50%;
						margin-right: rem(18);
						/deep/.van-image__img {
							border-radius: 50%;
						}
						/deep/.van-image__error {
							border-radius: 50%;
							img {
								border-radius: 50%;
								width: rem(79);
								height: rem(79);
							}
						}
					}
					.user-info {
						max-width: rem(300);
						overflow: hidden;
						.user-name {
							font-size: rem(30);
							font-family: PingFangSC-Regular;
							font-weight: bold;
							color: rgba(51, 51, 51, 1);
							line-height: 1.2;
						}
						.company-name {
							margin-top: rem(14);
							font-size: rem(22);
							font-family: PingFangSC-Regular;
							color: rgba(153, 153, 153, 1);
							line-height: 1.2;
						}
					}
				}
			}
			.integral {
				text-align: right;
				font-size: rem(30);
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}
		}
	}
	.main-my {
		position: sticky;
		bottom: 0;
		height: rem(100);
		left: 0;
		right: 0;
		background-color: #fff;
		box-shadow: 0 rem(-20) rem(30) 0 #f7f7f7;
		.my-rank-info {
			height: rem(100);
			padding: 0 rem(23) 0 rem(14);
			display: flex;
			align-items: center;
			justify-content: space-between;

			margin: 0 rem(30);
			.my-rank-info-left {
				flex: 1;
				display: flex;
				align-items: center;
			}
			.rank-num {
				width: rem(80);
				height: rem(50);
				flex: 0 0 auto;
				line-height: rem(60);
				&.my-num {
					width: rem(110);
				}
				img,
				span {
					display: block;
					width: rem(42);
					height: 100%;
					font-size: rem(30);
					font-weight: 600;
					text-align: center;
					color: rgba(51, 51, 51, 1);
				}
			}

			.rank-userinfo {
				height: 100%;
				display: flex;
				align-items: center;
				.van-image {
					width: rem(74);
					height: rem(74);
					border-radius: 50%;
					margin-right: rem(18);
					/deep/.van-image__img {
						border-radius: 50%;
					}
					/deep/.van-image__error {
						border-radius: 50%;
						img {
							border-radius: 50%;
							width: rem(79);
							height: rem(79);
						}
					}
				}
				.user-info {
					max-width: rem(300);
					overflow: hidden;
					.user-name {
						font-size: rem(30);
						font-family: PingFangSC-Regular;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
						line-height: 1.2;
					}
					.company-name {
						margin-top: rem(14);
						font-size: rem(22);
						font-family: PingFangSC-Regular;
						color: rgba(153, 153, 153, 1);
						line-height: 1.2;
					}
				}
			}
			.integral {
				text-align: right;
				font-size: rem(30);
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}
		}
		.my-rank-info-empty {
			text-align: left;
			line-height: rem(100);
			color: #333;
			padding-left: rem(30);
			font-size: rem(30);
		}
	}
}
</style>
